<template>
	<base-popup-small
		v-model:show="show"
		:confirm-button-text="$t('action.close')"
		@confirm="close"
		class="!pb-4"
		hideCloseButton>
		<div class="van-dialog__message van-dialog__content--isolated">
			<div class="van-dialog__text flex items-center gap-2 justify-center">
				<base-icon name="remove" class="error" />
				<span
					v-html="
						$t('withdraw.dialogText', {
							amount: currency + ' ' + fmtAmount(unCompleteTaskAmount, { hideCurrenySymbol: true })
						})
					"></span>
			</div>
			<div class="relative mt-6">
				<div class="btnClose cursor-pointer text-primary text-center pt-4" @click="close">
					{{ $t('action.close') }}
				</div>
			</div>
		</div>
	</base-popup-small>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useAppStore, useWalletStore } from '@/store'
import { fmtAmount } from '@/utils'
import { BaseIcon, BasePopupSmall } from '@/components/base'

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	}
})
const walletStore = useWalletStore()
const appStore = useAppStore()

const emit = defineEmits(['update:modelValue'])

const show = ref(false)
watch(
	() => props.modelValue,
	() => {
		show.value = props.modelValue
	}
)

const close = () => {
	emit('update:modelValue', false)
}

const currency = computed(() => appStore.currency)
const unCompleteTaskAmount = computed(() => walletStore.withdrawChannel.unCompleteTaskAmount)
</script>
<style scoped lang="scss">
:deep(.error) {
	color: var(--color-danger);
}

.btnClose:after {
	position: absolute;
	box-sizing: border-box;
	content: ' ';
	pointer-events: none;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	border: 0 solid var(--color-border-2);
	transform: scale(0.5);
	border-top-width: 0.5px;
}
</style>
